/**
 * 学习目标：Route组件的说明
 *
 */
import React, { Component } from 'react';

import { HashRouter as Router, Route, Link, NavLink } from 'react-router-dom';
import './index.css';

export default class App extends Component {
  render() {
    return (
      <Router>
        <div>App组件</div>
        <div>
          <NavLink to="/home" activeClassName="my-active">
            跳到Home
          </NavLink>
          <br />
          <a href="#/home">点我调到Home</a>
          <br />
          <NavLink to="/my" activeClassName="my-active" exact>
            跳到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend" activeClassName="my-active" exact>
            跳到朋友
          </NavLink>
        </div>
        {/* 1.1 默认情况下，path="/"   => 能够匹配任意/开始的路径 */}
        {/* 1.2 一般来说，如果路径配置了 /， 都需要配置 exact 属性 */}
        <Route path="/" component={MyMusic} exact />
        <Route path="/home" component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/my" component={MyMusic} />
        <Route path="/friend" component={Friend} />
        {/* 2.如果没有指定 path，那么一定会被渲染 */}
        {/* <Route component={Friend} /> */}
        {/* 3.Route是从上往下，依次匹配，匹配到第一个之后，会继续匹配
             可以理解为，每个Route是独立的，
             匹配的流程：
              1.匹配上返回component组件
              2.匹配不上返回null
        */}
      </Router>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Home组件</h1>
      </div>
    );
  }
}

class MyMusic extends React.Component {
  render() {
    return (
      <div>
        <h1>我是MyMusic组件</h1>
      </div>
    );
  }
}

class Friend extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Friend组件</h1>
      </div>
    );
  }
}
